<script setup>
//前端开发：先死后活法，前端页面数据是死的，只有调用了后端的数据才是真正的动网络数据
//导入axios
import axios from 'axios'
//导入ref
import { ref } from 'vue'
//导入user.js
import { userGetAllService } from './api/user.js'
//定义响应数据
const users = ref([])
//获取所有用户信息
//let data=userGetAllService()
//users.value=data
//因为函数是异步的，所以要使用await，同时函数使用async
const getAllUser=async function(){
  let data=await userGetAllService()
  users.value=data
}
//调用函数
getAllUser()
</script>

<template>
  <h2>用户信息列表</h2>
  <table>
      <tr>
        <th>ID</th>
        <th>用户名</th>
        <th>信息</th>
        <th>状态</th>
        <th>余额</th>
        <th>操作</th>
      </tr>
    <tr  v-for="user in users">
      <td>{{user.id}}</td>
      <td>{{user.username}}</td>
      <td>{{user.info}}</td>
      <td>{{user.status}}</td>
      <td>{{user.balance}}</td>
      <td>
        <button>编辑</button>
        <button>删除</button>
      </td>
    </tr>
  </table>

</template>

<style scoped>

</style>